<template>
  <view class="item-content text-content">
    <view class="text-wrapper" v-for="text in texts" :key="text">
      <view class="text-content ellipsis">{{ text }}</view>
      <image 
        src="/static/icons/copy.svg" 
        class="copy-icon"
        @click="handleCopy(text)"
      />
    </view>
  </view>
</template>

<script setup>
defineProps({
  texts: {
    type: Array,
    required: true
  }
})

const handleCopy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.text-content {
  color: #606266;
  line-height: 1.6;
  font-size: 28rpx;

  &.ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.text-wrapper {
  position: relative;
  padding-right: 60rpx;
  margin-bottom: 16rpx;

  .copy-icon {
    position: absolute;
    right: 16rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 32rpx;
    height: 32rpx;
    opacity: 0.6;
    transition: opacity 0.3s ease;

    &:active {
      opacity: 1;
    }
  }
}
</style>